<template>
  <div class="row">
    <div id="home" class="col-12 text-center">
      <div class="background">
        <h1>欢迎大家品尝Pizza！</h1>
        <h2>这里有你非常喜欢的披萨</h2>
        <button @click="goToMenu" type="button" class="btn btn-success">Let's order</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    goToMenu () {
      //  this.$router.go(-1) // 跳转到上一下浏览的页面
      //  this.$router.replace('/menu') // 指定跳转地址
      //  this.$router.replace({name: 'Menu'}) // 指定跳转路由的name名字下, 不会添加向history中记录
      this.$router.push('/about') // 通过push跳转，并向history中添加记录
    }
  }
}
</script>

<style lang="stylus" scoped>
  h1, h2
    margin 6%
  #home
    background url("../assets/images/img_01.jpg") no-repeat
    height 85vh
    background-size cover
    box-sizing border-box
  .background
    background #eee
    opacity .8
    max-width 70vw
    margin 120px 70px 0
    padding 20px 0
</style>
